<template>
  <div>
    <div class="head">
      <a @click="$router.push({path: '/Prize'})" class="return"></a>
      {{$t('Order.v1')}}
    </div>
    <div class="overlay nav-btm">
      <div class="overlay-content scrolling">
        <!-- 收货地址 -->
        <div class="increase" v-show="off" @click="$router.push({path: '/Address'})"> + {{$t('Order.v2')}}</div>
        <div class="increase2" v-show="!off" @click="$router.push({path: '/Address'})">
          <div class="hd">{{site.username}} <span>{{site.phoneNumber}}</span></div>
          <div class="bd">{{site.province}}{{site.city}}{{site.district}}{{site.street}}</div>
        </div>

        <div class="cp">
          <!-- <div class="title vux-1px-b">{{$moment(list.nowTime).utcOffset(480).format("YYYY-MM-DD HH:MM:SS")}}</div> -->
          <div class="title vux-1px-b">{{list.nowTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}</div>
          <div class="weui-flex vux-1px-b" style="padding-bottom:10px;">
            <div class>
              <img class="img" :src="list.picture" alt/>
            </div>
            <div class="weui-flex__item">
              <div class="bt">{{list.title}}</div>
              <div class="price">
                <span>￥{{parseFloat(list.price ? list.price : '0.00').toFixed(3).slice(0,-1)}}</span> <span
                class="count">x 1</span>
              </div>
            </div>
          </div>
          <div class="weui-flex freight">
            <div class="weui-flex__item">{{$t('Order.v3')}}</div>
            <div>{{parseFloat(list.freight ? list.freight : '0.00').toFixed(3).slice(0,-1)}} EXUU</div>
          </div>
          <div class="weui-flex freight">
            <div class="weui-flex__item">{{$t('Order.v4')}}</div>
            <div class="delete">￥{{parseFloat(list.price ? list.price : '0.00').toFixed(3).slice(0,-1)}}</div>
          </div>
        </div>

      </div>
    </div>

    <div class="weui-flex weui-fixed-btm vux-1px-t">
      <div class="weui-flex__item tar"><span>{{$t('Order.v5')}}：¥{{parseFloat(list.price ? list.price : '0.00').toFixed(3).slice(0,-1)}}</span>
      </div>
      <div class="btn" @click="receive">{{$t('Order.v1')}}</div>
    </div>

    <van-action-sheet v-model="show" :title="$t('Order.v6')">
      <van-cell-group>
        <van-field v-model.trim="payPwd" type="password" maxlength="6" input-align="center"
                   :placeholder="$t('Order.v7')"/>
      </van-cell-group>
      <div style="margin:10px 20px 0;">
        <van-button type="primary" size="normal" :show-loading="loading" :disabled="loading"
                    style="background:#3ca76d; margin-bottom:20px;" @click="submit">{{$t('Order.v8')}}
        </van-button>
      </div>
    </van-action-sheet>

  </div>
</template>

<script>
    let _this;
    import {Toast} from 'vant';
    import {dateFormat} from 'vux'
    import {recreation, mine, base} from './../../utils/api';

    export default {
        data() {
            return {
                list: [],
                site: [],
                off: null,
                show: false,
                payPwd: '',
                k: '',
                v: '',
                addressId: '',
                loading: false,
            }
        },
        beforeCreate() {
            _this = this;
        },
        mounted() {
            //订单参数
            recreation.getOrder({
                'id': sessionStorage.id,
            }).then(res => {
                this.list = res.data
            });
            //查询是否有默认地址
            recreation.getDefault().then(res => {
                if (res.code == 200) {
                    if (res.data == null) {
                        this.off = true;
                    } else {
                        this.off = false;
                        this.site = res.data;
                    }
                }
            })

        },
        methods: {
            receive() {
                if (this.off) {
                    Toast({
                        duration: 1500,
                        message: _this.$t('Order.v9')
                    });
                    return false;
                }
                ;
                this.show = true;
            },
            submit() {
                if (!this.payPwd) {
                    Toast(_this.$t('Order.v10'));
                    return false;
                }
                if (this.payPwd.length != 6) {
                    Toast(_this.$t('Order.v11'));
                    return false;
                }
                this.loading = true;
                base.getCredentials().then(res => {
                    if (res.code == 8008) {
                        this.k = res.data.k;
                        this.v = res.data.v;
                        recreation.getReceive({
                            'id': sessionStorage.id,
                            'addressId': this.site.id,
                            'coinId': 1, // EXUU 的币种 ID 为1
                            'password': this.rsaEncrypt(this.payPwd + ',' + this.k + ',' + this.v),
                            'key': this.k
                        }).then(res => {
                            if (res.code == 200) {
                                this.$router.push({
                                    path: '/Prize'
                                })
                                this.loading = false;
                            } else if (res.code == 500) {
                                this.loading = false;
                            }
                            Toast({
                                duration: 1000,
                                message: res.msg
                            });
                        })
                    }
                })

            }
        },
        filters: {
            dateFormat
        },
        watch: {
            payPwd: function () {
                this.payPwd = this.payPwd.replace(/[^\d]/g, ''); // 只能输入数字
            }
        }
    };
</script>

<style lang="less" scoped>
  .overlay {
    background: rgb(245, 245, 245);
  }

  .van-cell {
    background: white;
  }

  .nav-btm {
    bottom: 40px;
  }

  .head {
    background: white;
    color: black;
  }

  .head .return:after {
    border-color: #000;
  }

  .increase {
    background: #fff;
    color: #666;
    text-align: center;
    padding: 16px 0;
    margin: 10px 0;
  }

  .increase2 {
    position: relative;
    background: #fff;
    color: #333;
    padding: 10px 30px 10px 10px;
    margin-bottom: 10px;
    margin-top: 10px;

    &:after {
      content: " ";
      display: inline-block;
      height: 6px;
      width: 6px;
      border-width: 2px 2px 0 0;
      border-color: #C8C8CD;
      border-style: solid;
      -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: absolute;
      top: 50%;
      margin-top: -4px;
      right: 16px;
    }

    .hd {
      span {
        color: #999;
      }
    }

    .bd {
      font-size: 13px;
    }
  }

  .cp {
    background: #fff;
    color: #333;
    padding: 10px;

    .img {
      width: 80px;
      margin-right: 10px;
    }

    .bt {
      height: 50px;
      line-height: 140%;
      font-size: 13px;
    }

    .count {
      color: #999;
    }

    .title {
      padding: 0 0 10px;
      margin-bottom: 10px;
    }

    .freight {
      padding: 5px 0;
      font-size: 12px;
    }

    .delete {
      text-decoration: line-through;
    }
  }

  .weui-fixed-btm {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    .btn {
      padding: 14px 20px;
      background: #3ca76d;
      color: #fff;
    }

    .weui-flex__item {
      span {
        padding-top: 14px;
        display: block;
        padding-right: 10px;
        text-decoration: line-through;
      }
    }
  }

  /deep/ .van-field__control {
    color: black !important;
  }
</style>
